<template>
<div>
  <template>
    <el-collapse-transition>
    <el-table
        style="width:100%;z-index:0"
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        v-show="isShow"
    >
      <el-table-column
          prop="peopleID"
          sortable
          label="编号">
        <template slot-scope="scope" >
          <label v-show="!scope.isEdit">{{scope.row.peopleID}}</label>
        </template>

      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="old"
          sortable
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="nation"
          label="民族">
      </el-table-column>
      <el-table-column
          prop="face"
          label="政治面貌">
      </el-table-column>
      <el-table-column
          prop="learn"
          label="文化程度">
      </el-table-column>
      <el-table-column
          prop="work"
          label="工作">
      </el-table-column>
      <el-table-column
          prop="comeTime"
          sortable
          label="入职日期">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="money"
          sortable
          label="工资">
      </el-table-column>
      <el-table-column
          prop="id"
          sortable
          label="部门ID">
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-button @click="isShow =!isShow">返回查询</el-button>
        </template>
      </el-table-column>

    </el-table>
    </el-collapse-transition>
  </template>
  <transition name="el-zoom-in-top">
  <div class="noShow flex-column" v-show="!isShow">
    <div class="flex-column" style="width: 60%;height: 40%;margin-top: 10%;margin-left: 12%">

      <div>
        工作：
        <el-input
            placeholder="工作"
            v-model="work">
        </el-input>
      </div>
      <div>
        部门：
        <el-input
            type="number"
            max=4
            min="0"
            placeholder="部门"
            v-model="id">
        </el-input>
      </div>
      <div>
        民族：
        <el-input
            placeholder="民族"
            v-model="nation">
        </el-input>
      </div>
      <div>
        <el-input
            style="width: 20%"
            v-model="moneyMin">
        </el-input>
        -工资-
        <el-input
            style="width: 20%"
            v-model="moneyMax">
        </el-input>
        <el-button @click="doSelect" style="margin-left: 40px;width: 200px;background: #aee4f6;">
          <i class="el-icon-search"></i>
        </el-button>
      </div>
      <div size="small" style="color: #a9085e;margin-top: 10px;font-size: 10px">
        不写就是不做限制,部门号设置为零时不做限制,工资范围乱写也不做限制</div>
    </div>
  </div>
  </transition>
</div>
</template>

<script>
import { HttpManager} from "@/api";

export default {
name: "Tab4",
  data(){
    return{
      tableData:[],
      isShow:false,
      work:'管理员',
      id:4,
      nation:'汉',
      moneyMin:0,
      moneyMax:30000,
      loading:false,
      tiaoJian:""
    }
  },
  methods:{
    doSelect(){
      this.tiaoJian  = new URLSearchParams()
      this.tiaoJian.append('work',this.work)
      this.tiaoJian.append('id',this.id)
      this.tiaoJian.append('nation',this.nation)
      this.tiaoJian.append('max',this.moneyMax)
      this.tiaoJian.append('min',this.moneyMin)
      HttpManager.justSearch(this.tiaoJian).then(
          (response)=>{
            console.log(response)
            this.tableData = response
          }
      )
      this.isShow = true
    }
  },
  created() {
    /*HttpManager.getAllPeople().then(
        (response) => {
          for (let i = 0;i < response.length;i++) {
            //格式化日期的格式,不然会显示13位的数字
            response[i].comeTime = DateTurn.timeToString(response[i].comeTime)
          }
          this.tableData = response
        }
    )*/

  }
}
</script>

<style scoped>
.noShow{
  justify-content: center;
  align-items: center;
  height: 100%;
}
.el-input{
  width: 70%;
  margin-top: 20px;
}
</style>
